<template>
  <el-card v-loading="loading" class="box-card">
    <template #header>
      <span class="el-icon-picture-outline">审批记录</span>
    </template>
    <div class="flow-chart-container">
      <div class="flow-chart">
        <!-- 主节点 -->
<!--        <div v-if="tasks.length > 0" class="flow-node main-node">-->
<!--          <div class="timeline-line"></div>-->
<!--          <div class="node-dot" :class="getTaskTimelineItemType(tasks[0].child)"></div>-->
<!--          <div class="node-content">-->
<!--            <p class="task-title">审批任务：{{ tasks[0].stepName }}</p>-->
<!--            <approval-record-item :item="tasks[0]" />-->
<!--          </div>-->
<!--        </div>-->

        <!-- 后续节点 -->
        <div v-if="tasks.length > 0" class="flow-branches">
          <!-- 并行节点容器 -->
          <div
            v-for="(group, groupIndex) in getNodeGroups(tasks)"
            :key="'group-' + groupIndex"
            class="node-group"
            :class="{'parallel-group': group.isParallel}"
          >
            <!-- 并行节点 -->
            <div
              v-for="(item, itemIndex) in group.nodes"
              :key="'node-' + groupIndex + '-' + itemIndex"
              class="flow-node"
              :class="{'parallel-node': item.ispar}"
            >
              <div class="node-dot" :class="getTaskTimelineItemType(item.child)"></div>
              <div class="node-content" :class="{'parallel-content': item.ispar}">
                <p class="task-title">审批任务：{{ item.stepName }}</p>
                <approval-record-item :item="item" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import { computed } from 'vue';
import { parseTime } from "@/utils/util";
import ApprovalRecordItem from './ApprovalRecordItem.vue';

defineOptions({ name: 'BpmProcessInstanceTaskList' })

const props = defineProps({
  loading: {
    type: Boolean,
    default: false
  }, // 是否加载中
  processInstance: {
    type: Object,
    default:{}
  }, // 流程实例
  tasks: {
    type: Array,
    default: () => []
  } // 流程任务的数组
})

/** 获得任务对应的颜色 */
const getTaskTimelineItemType = (item) => {
  if (item && item.length > 0) {
    //判断子流程中的状态，当子流程存在item.StateID === '2'时流程状态为失败
    if (item.find(item1 => item1.StateID === '2')) {
      return 'danger'
    }
    else if (item.find(item1 => item1.StateID === '1')) {
      return 'success'
    }
    else
      return 'primary'
  } else {
    return ''
  }
}

/**
 * 将节点分组，并行节点放在同一组
 */
/**
 * 将节点分组：相同sort值的并行节点分为一组，非并行节点单独分组
 */
const getNodeGroups = (nodes) => {
  if (!nodes || nodes.length === 0) return [];

  const groups = [];
  let currentGroup = null;
  console.log("原始节点:", nodes)
  nodes.forEach((node, index) => {
    if (node.ispar) {
      // 并行节点处理
      if (currentGroup?.isParallel && currentGroup.sort === node.sort) {
        // 当前组是并行组且sort相同 -> 加入当前组
        currentGroup.nodes.push(node);
      } else {
        // 创建新的并行组
        currentGroup && groups.push(currentGroup);
        currentGroup = {
          isParallel: true,
          nodes: [node],
          sort: node.sort // 存储sort值用于比较
        };
      }
    } else {
      // 非并行节点处理
      currentGroup && groups.push(currentGroup);
      // 每个非并行节点单独成组
      currentGroup = {
        isParallel: false,
        nodes: [node]
      };
      // 立即加入结果（因为非并行节点不连续）
      groups.push(currentGroup);
      currentGroup = null;
    }

    // 处理最后一个节点（非并行节点已立即加入）
    if (index === nodes.length - 1 && currentGroup) {
      groups.push(currentGroup);
    }
  });

  console.log("分组结果:", groups);
  return groups;
};

/** 刷新数据 */
const emit = defineEmits(['refresh']) // 定义 success 事件，用于操作成功后的回调
const refresh = () => {
  emit('refresh')
}
</script>

<style scoped>
.box-card {
  margin-bottom: 20px;
}

.flow-chart-container {
  padding: 20px;
  display: flex;
  justify-content: center;
}

.flow-chart {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 800px;
  position: relative;
}

/* 时间线 */
.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  height: calc(100% + 30px);
  background-color: #E4E7ED;
  transform: translateX(-50%);
  z-index: 0;
}

.flow-chart::before {
  content: '';
  position: absolute;
  top: 40px;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #E4E7ED;
  transform: translateX(-50%);
  z-index: 0;
}

/* 主节点样式 */
.main-node {
  width: 100%;
  max-width: 500px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}

/* 节点基本样式 */
.flow-node {
  position: relative;
  margin-bottom: 30px;
  width: 100%;
  max-width: 450px;
  z-index: 1;
}

.node-content {
  position: relative;
  padding: 15px;
  background-color: #FFF;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.node-dot {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #909399;
  border: 2px solid #FFF;
  z-index: 2;
}

.node-dot.success {
  background-color: #67C23A;
}

.node-dot.danger {
  background-color: #F56C6C;
}

.node-dot.primary {
  background-color: #409EFF;
}

/* 分支容器 */
.flow-branches {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 节点组 */
.node-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

/* 并行节点组 */
.parallel-group {
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
}

.parallel-group .flow-node {
  flex: 1;
  min-width: 200px;
  max-width: 350px;
}

/* 并行节点内容 */
.parallel-content {
  background-color: #FFF;
  //border-top: 3px solid #409EFF;
}

.task-title {
  font-weight: 700;
  margin-bottom: 12px;
}

/* 响应式调整 */
@media screen and (max-width: 768px) {
  .flow-chart::before {
    left: 20px;
    transform: none;
  }

  .node-dot {
    left: 20px;
    transform: none;
  }

  .parallel-group {
    flex-direction: column;
    align-items: flex-start;
    padding-left: 40px;
  }

  .parallel-group .flow-node {
    width: calc(100% - 40px);
    max-width: none;
  }

  .node-group {
    align-items: flex-start;
    padding-left: 40px;
  }

  .flow-node {
    max-width: calc(100% - 40px);
  }
}
</style>
